<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>享元模式典型应用之节点对象</title>
</head>
<body>
    <input type="radio" name="color" id="red" value="red">红色
    <input type="radio" name="color" id="blue" value="blue">蓝色
    <input type="radio" name="color" id="green" value="green">绿色
    <div id="container"></div>
    <button onclick="draw()">绘制</button>
    <script>
        // 共享的节点独享
        function Dom() {
            this.div = document.createElement('div');
            this.setColor= function (color) { 
                return this.div.style = `width:30px;height:30px;background:${color};`
             }
        }
        let dom = new Dom();
        function draw() { 
            let btns = Array.from(document.getElementsByName('color'));
            let btn = btns.find(item => item.checked);
            let color = btn.value;
            // 这里就是将共享的dom独立放在了一个内部类中
            dom.setColor(color);
            document.getElementById('container').appendChild(dom.div);
         }
    </script>
</body>
</html>